<template>
    <div>
        <div class="tab-back"><span class="left" @click="toback()"></span><div class="title">处理记录</div><div class="right"></div></div>
        <div class="bill">
            <ul>
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        loading-text="加载中"
                        :immediate-check="false"
                        @load="onLoad"
                >
                    <li v-for="(item,index) in list">
                       <div class="f-flex-tx">
                           <div class="left"><p class="p1">{{item.txtype | setType}}</p><p class="p2">{{item.createtime}}</p></div>
                           <div class="tx-right">
                               <!--<p class="p1">-->
                               <!--<span v-if="isShowMoney">￥{{item.money}}</span>-->
                               <!--&lt;!&ndash;<img style="width: 12px;height: 12px" src="../../assets/img/money_icon.png"/>&ndash;&gt;-->
                               <!--</p>-->
                               <!--<p class="p2 red_ft" v-if="isShowMoney">{{item.status}}</p>-->
                               <p class="p2 txBtn" @click="showtx(item.money,item.status)">处理进度</p>
                           </div>
                       </div>
                    </li>
                </van-list>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return {
                loading: false,
                finished: false,
                isShowMoney: false,
                page:1,
                list:[]
            }
        },
        mounted(){
            this.getList()
        },
        filters:{
            setType(val){
                if(val == '支付宝提现') return '支付宝TX';
                if(val == '微信提现') return '微信TX';
            }
        },
        methods:{
            showtx(money,status){
                document.title = '...';
                this.$dialog.confirm({
                    title: status,
                    message: `￥${money}`,
                    showCancelButton: false,
                    overlayStyle: {backgroundColor: 'black'}
                })
                    .then(() => {
                        document.title = '处理记录'
                    }).catch(()=>{
                        document.title = '处理记录'
                })
            },
            toback(){
                this.$router.go(-1);//返回上一层
            },
            //触底加载更多
            onLoad() {
                // 异步更新数据
                this.page++;
                this.getList();
            },
            getList(){
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/user.tixian/lists",
                    params: {page:that.page },
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            var ress=res.data.data.data;
                            if (ress.length < 1 || ress == null ) {
                                // 加载结束
                                that.finished = true;
                                return;
                            }else {
                                that.list.push.apply(that.list,ress)
                            }
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>

    .f-flex-tx{
        display: flex;
        width: 345px;
        justify-content: space-between;
        align-items: center;
    }
    .txBtn{
        border: 0.5px solid #4482E4;
        background: #4482E4;
        border-radius:5px;
        color: #fff;
        font-size: 12px;
        padding: 1px 6px;
        text-align: center;
        margin-top: 5px;
    }

    .tab-back {
        height: 44px;
        background: #fc5d4d;
        display: -webkit-box;
    }
    .tab-back .left {
        width: 44px;
        display: block;
        height: 44px;
        background: url() no-repeat 50%;
        background-size: 9px 16px;
    }
    .tab-back .title {
        -webkit-box-flex: 1;
        font-size: 15px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        line-height: 44px;
    }
    .tab-back .right {
        width: 44px;
        height: 44px;
    }
    .bill {
        padding-bottom: 100px;
    }
    .bill ul {
        display: block;
        overflow: hidden;
    }
    .bill ul li {
        display: block;
        background: #fff;
        display: -webkit-box;
        border-bottom: .5px solid #efeff4;
        padding: 5px 15px;
    }
    .bill ul li .left {
        -webkit-box-flex: 1;
        padding-bottom: 2px;
    }
    .bill ul li .left .p1 {
        display: block;
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bill ul li .left .p2 {
        color: #999;
        font-size: 12px;
    }
    .bill ul li .tx-right {
        width: 70px;
    }
    .bill ul li .tx-right .p1 {
        display: block;
        text-align: right;
        line-height: 20px;
        font-size: 13px;
        font-weight: 700;
        color: #5189de;
    }
    .bill ul li .tx-right .p2 {
        display: block;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #fff;
    }
    .red_ft {
        color: #fc5d4d !important;
    }
</style>